{% include 'base.html' %}

<style>
    .form-container {
        max-width: 900px;
        margin: 30px auto;
        background: white;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .form-title {
        font-size: 22px;
        margin-bottom: 25px;
        color: #2c3e50;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #444;
    }

    .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        transition: border-color 0.3s;
    }

    .form-control:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }

    .current-photo {
        max-width: 200px;
        margin: 10px 0;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .select-section {
        margin-bottom: 30px;
    }

    .select-title {
        font-size: 16px;
        margin-bottom: 10px;
        color: #34495e;
        font-weight: 500;
    }

    select.form-control {
        height: auto;
        min-height: 150px;
    }

    .btn-submit {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .btn-submit:hover {
        background-color: #2980b9;
    }

    .full-width {
        grid-column: 1 / -1;
    }
</style>

<div class="form-container">
    <h1 class="form-title">修改角色信息</h1>
    <form method="post" enctype="multipart/form-data">
        <div class="form-grid">
            <div class="form-group">
                <label for="name">名字</label>
                <input type="text" name="name" id="name" class="form-control" value="{{role.name}}" required>
            </div>

            <div class="form-group">
                <label for="xing_bie">性别</label>
                <input type="text" name="xing_bie" id="xing_bie" class="form-control" value="{{role.xing_bie}}" required>
            </div>

            <div class="form-group">
                <label for="yuan_ming">原名</label>
                <input type="text" name="yuan_ming" id="yuan_ming" class="form-control" value="{{role.yuan_ming}}" required>
            </div>

            <div class="form-group">
                <label for="shen_gao">身高</label>
                <input type="text" name="shen_gao" id="shen_gao" class="form-control" value="{{role.shen_gao}}" required>
            </div>

            <div class="form-group">
                <label for="ti_zhong">体重</label>
                <input type="text" name="ti_zhong" id="ti_zhong" class="form-control" value="{{role.ti_zhong}}" required>
            </div>

            <div class="form-group">
                <label for="fa_se">发色</label>
                <input type="text" name="fa_se" id="fa_se" class="form-control" value="{{role.fa_se}}" required>
            </div>

            <div class="form-group">
                <label for="tong_se">瞳色</label>
                <input type="text" name="tong_se" id="tong_se" class="form-control" value="{{role.tong_se}}" required>
            </div>

            <div class="form-group">
                <label for="sheng_ri">生日</label>
                <input type="text" name="sheng_ri" id="sheng_ri" class="form-control" value="{{role.sheng_ri}}" required>
            </div>

            <div class="form-group full-width">
                <label for="file">图片</label>
                {% if role.photo_path %}
                <img src="{{ url_for('static', filename=role.photo_path) }}" alt="当前照片" class="current-photo">
                {% endif %}
                <input type="file" name="file" id="file" accept="image/*" class="form-control">
            </div>

            <div class="form-group full-width">
                <label for="jian_jie">简介</label>
                <input type="text" name="jian_jie" id="jian_jie" class="form-control" value="{{role.jian_jie}}" required>
            </div>

            <div class="form-group full-width">
                <label for="gu_shi">故事</label>
                <input type="text" name="gu_shi" id="gu_shi" class="form-control" value="{{role.gu_shi}}" required>
            </div>

            <div class="form-group full-width">
                <label for="fei_sheng">飞升</label>
                <input type="text" name="fei_sheng" id="fei_sheng" class="form-control" value="{{role.fei_sheng}}" required>
            </div>
        </div>

        <div class="select-section">
            <div class="select-title">稀有度</div>
            <select id="xi_you_du" name="xi_you_dus" multiple class="form-control">
                {% for xi_you_du in xi_you_dus %}
                <option value="{{xi_you_du.id}}" {% if xi_you_du in role.xi_you_dus %} selected {% endif %}>
                    {{xi_you_du.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">标签</div>
            <select id="tag" name="tags" multiple class="form-control">
                {% for tag in tags %}
                <option value="{{tag.id}}" {% if tag in role.tags %} selected {% endif %}>
                    {{tag.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">性格</div>
            <select id="xing_ge" name="xing_ges" multiple class="form-control">
                {% for xing_ge in xing_ges %}
                <option value="{{xing_ge.id}}" {% if xing_ge in role.xing_ges %} selected {% endif %}>
                    {{xing_ge.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">星球</div>
            <select id="xing_qiu" name="xing_qius" multiple class="form-control">
                {% for xing_qiu in xing_qius %}
                <option value="{{xing_qiu.id}}" {% if xing_qiu in role.xing_qius %} selected {% endif %}>
                    {{xing_qiu.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">阵营</div>
            <select id="zhen_ying" name="zhen_yings" multiple class="form-control">
                {% for zhen_ying in zhen_yings %}
                <option value="{{zhen_ying.id}}" {% if zhen_ying in role.zhen_yings %} selected {% endif %}>
                    {{zhen_ying.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">突破材料</div>
            <select id="tu_po_cai_liao" name="tu_po_cai_liaos" multiple class="form-control">
                {% for tu_po_cai_liao in tu_po_cai_liaos %}
                <option value="{{tu_po_cai_liao.id}}" {% if tu_po_cai_liao in role.tu_po_cai_liaos %} selected {% endif %}>
                    {{tu_po_cai_liao.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">技能</div>
            <select id="ji_neng" name="ji_nengs" multiple class="form-control">
                {% for ji_neng in ji_nengs %}
                <option value="{{ji_neng.id}}" {% if ji_neng in role.ji_nengs %} selected {% endif %}>
                    {{ji_neng.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">武器</div>
            <select id="weapon" name="weapons" multiple class="form-control">
                {% for weapon in weapons %}
                <option value="{{weapon.id}}" {% if weapon in role.weapons %} selected {% endif %}>
                    {{weapon.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">属性</div>
            <select id="shu_xing" name="shu_xings" multiple class="form-control">
                {% for shu_xing in shu_xings %}
                <option value="{{shu_xing.id}}" {% if shu_xing in role.shu_xings %} selected {% endif %}>
                    {{shu_xing.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">刻印</div>
            <select id="ke_yin" name="ke_yins" multiple class="form-control">
                {% for ke_yin in ke_yins %}
                <option value="{{ke_yin.id}}" {% if ke_yin in role.ke_yins %} selected {% endif %}>
                    {{ke_yin.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">称号</div>
            <select id="cheng_hao" name="cheng_haos" multiple class="form-control">
                {% for cheng_hao in cheng_haos %}
                <option value="{{cheng_hao.id}}" {% if cheng_hao in role.cheng_haos %} selected {% endif %}>
                    {{cheng_hao.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">魂印</div>
            <select id="hun_yin" name="hun_yins" multiple class="form-control">
                {% for hun_yin in hun_yins %}
                <option value="{{hun_yin.id}}" {% if hun_yin in role.hun_yins %} selected {% endif %}>
                    {{hun_yin.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">配队推荐</div>
            <select id="pei_dui_tui_jian" name="pei_dui_tui_jians" multiple class="form-control">
                {% for pei_dui_tui_jian in pei_dui_tui_jians %}
                <option value="{{pei_dui_tui_jian.id}}" {% if pei_dui_tui_jian in role.pei_dui_tui_jians %} selected {% endif %}>
                    {{pei_dui_tui_jian.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="select-section">
            <div class="select-title">武器推荐</div>
            <select id="wu_qi_tui_jian" name="wu_qi_tui_jians" multiple class="form-control">
                {% for wu_qi_tui_jian in wu_qi_tui_jians %}
                <option value="{{wu_qi_tui_jian.id}}" {% if wu_qi_tui_jian in role.wu_qi_tui_jians %} selected {% endif %}>
                    {{wu_qi_tui_jian.name}}
                </option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <input type="submit" value="上传" class="btn-submit">
        </div>
    </form>
</div>